<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鲜花列表</title>
		 <link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
		 <script src="../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript" src="../res/js/Tools.js"></script>
		 <script src="../res/layui/layui.js" charset="utf-8"></script>
		<script>
			$.ajaxSetup({
				async : false
			});
		</script>
		<!--<script type="text/javascript">
			function createTime(v){
				var date = new Date(v);
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				m = m<10?'0'+m:m;
				var d = date.getDate();
				d = d<10?("0"+d):d;
				/*var h = date.getHours();
				h = h<10?("0"+h):h;
				var M = date.getMinutes();
				M = M<10?("0"+M):M;*/
				var str = y+"-"+m+"-"+d/*+" "+h+":"+M*/;
				return str;
			}
		</script>-->
	</head>
	<body>
		<div class="demoTable" >
		    <table class="layui-hide" id="test" lay-filter="test"></table>
			<div id="laypage"></div>
		</div>
       <script>
		   var table2;
		layui.use(['table','layer','form','jquery','util'],function() {
			//获取table数据保存在变量中
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.$;
			var util = layui.util;
			var index;

			table2 = table.render({
				elem: '#test'
				, url: '../flower/findAll'
				, toolbar: '#headBtn' //开启头部工具栏，并为其绑定左侧模板
				, title: '鲜花列表'
				, cols: [[
					{type: 'checkbox', title: '全选', fixed: 'left'}
					//是否禁用拖拽列宽（默认false）unresize:true,是否禁用排序sort:true
					, {type: 'numbers', align: 'center', title: '序号'}//序列号 numbers
					, {field: 'fName', align: 'center', title: '鲜花名称', width: 140}
					, {field: 'ftName', align: 'center', title: '鲜花类型名称', width: 140}
					, {field: 'fMoney', align: 'center', title: '价格', width: 80, sort: true}
					/*,{field:'fDate',align:'center',title:'生产日期',edit:'text',width:160,templet :function (row){
							return createTime(row.fDate);
						}   }*/
					, {
						field: 'fDate',
						align: 'center',
						title: '生产日期',
						width: 160,
						templet: "<div>{{layui.util.toDateString(d.fDate,'yyyy-MM-dd')}}</div>"
					}
					, {field: 'fImage', align: 'center', title: '鲜花图片', width: 400}
					, {field: 'number', align: 'center', title: '数目', width: 80, sort: true}
					, {fixed: 'right', align: 'center', title: '操作', toolbar: '#barDemo', width: 120}
				]]
				, id: 'tableReload'//重载数据表格
				, page: true

			});

			//监听头部工具栏事件
			table.on('toolbar(test)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data;//获取选中的数据
				switch (obj.event) {
					case 'delAll':
						layer.confirm('你真的要删除吗？', function (index) {
							var data = checkStatus.data;
							var ids = "";
							$.each(data, function (index, item) {
								ids += item.fId + ",";
							});
							if (ids.length == 0) {
								layer.msg("请选择需要操作的行");
								return;
							}
							var url = "../flower/delAll";
							var datas = {
								ids: ids
							};
							$.post(url, datas, function (obj) {
								window.location.reload();
								layer.msg(obj.msg);
							}, "json");
						});
						break;
					case 'seachTable':	//搜索
						//执行重载
						table2.reload({
							url: '../flower/findAll',
							where: {
								fName: $("#fName").val()
							},
							page: {
								curr: 1 //第一页开始
							}
						});
						break;
					case 'add'://新增
						var index = layer.open({
							type: 2,
							title: '新增鲜花类型',
							shadeClose: true,
							shade: 0.8,
							area: ['30%', '60%'],
							content: 'flowerAddorUpdate.html?fId=',
							end: function () {

							}
						});
						break;
				}
				;

			});
			//监听行工具事件
			table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象
				if (layEvent == 'del') {
					layer.confirm('真的删除id：' + data.fName + '的数据吗？', function (index) {
						var url = "../flower/del";
						var datas = {fId:data.fId}
						$.post(url, datas, function (obj) {
							if (obj.num == 1) {
								layer.msg(obj.msg, {icon: 1, time: 1000}, function () {
									layer.close(index);//关闭层
									//parent.location.reload();//刷新主界面
									//$(".layui-laypage-btn").click();
								});
							} else if (obj.num == -1) {
								layer.msg(obj.msg, {icon: 2}, function () {
									layer.close(index);
									window.location.reload();
								});
							}
						}, "json");
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					});
				}
				if (layEvent == 'edit') { //编辑
					var data1 = obj.data;
					var index = layer.open({
						type: 2,
						title: '编辑鲜花',
						shadeClose: true,
						shade: 0.8,
						area: ['30%', '60%'],
						content: 'flowerAddorUpdate.html?id=' + data1.fId,
						end: function () {

						}
					});
				}
			});
		});

	</script>
</body>
<script type="text/html" id="headBtn">
    鲜花名称:
    <div class="layui-inline">
        <input class="layui-input" name="fName" id="fName" placeholder="请输入关键字" autocomplete="off">
    </div>
    <input type="button" lay-event="seachTable" class="layui-btn layui-btn-normal layui-btn-sm" value="搜索"/>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll">批量删除</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add" id="addflower">增加</button>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs"  lay-event="edit" title="编辑">编辑 </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</html>
